<template>
  <view class="contexts" v-bind:style="{ paddingTop: tops + 'px' }">
    <!-- Search -->
    <view class="search_top">
      <u-icon
        name="arrow-left"
        @click="backclick"
        size="20px"
        color="#333"
      ></u-icon>
      <view class="search_group" style="background-color: #e0dfdf">
        <input type="text" class="search_input" :value="searchval" />
        <view class="interval"></view>
        <text class="search_title" @click="seachclick">搜索</text>
      </view>
    </view>
    <scroll-view :scroll-y="true" :style="{ height: scrollHeight }">
      <!--推荐页完成 -->
      <!--      <bangdanVue v-if="!goodsshow"></bangdanVue>-->
      <!-- 商品页完成 -->
      <goods
        v-if="goodsshow"
        ref="goodlist"
        @searchGoodsList="searchGoodsList"
      ></goods>
    </scroll-view>
  </view>
</template>

<script>
import { fetchGoodsPageList } from "@/services/api";
import bangdanVue from "./component/bangdan.vue";
import goods from "./component/goodslist.vue";
export default {
  data() {
    return {
      goodsshow: false,
      searchval: null,
      searchdata: [],
      pageNum: 1,
      pageSize: 30,
      tops: 0,
      widthgoods: 0,
      scrollHeight: "100%",
    };
  },
  components: {
    bangdanVue,
    goods,
  },
  methods: {
    seachclick() {
      this.goodsshow = true;
      this.searchGoodsList(
        this.pageNum,
        this.pageSize,
        this.searchval,
        this.widthgoods,
      );
    },
    async searchGoodsList(p, l, t) {
      const { code, data, error } = await fetchGoodsPageList({
        goodsCategoryNo: t,
        pagination: {
          p,
          l,
        },
      });
      if (code == 0) {
        this.$refs.goodlist.datalist(p, l, t, data, this.widthgoods);
      }
    },
    //返回
    backclick() {
      this.$Router.back();
    },
    //
    initwidth() {
      let th = this;
      uni.getSystemInfo({
        success: (res) => {
          const menuButton = uni.getMenuButtonBoundingClientRect(); // 胶囊
          const navBarPadding = (menuButton.top - res.statusBarHeight) * 2;
          const statusBarHeight = res.statusBarHeight; //状态栏高度
          const navHeight = menuButton.height + navBarPadding; // nav高度
          const headerHeight = navHeight + statusBarHeight; // 总高度
          uni.setStorage({
            key: "navData",
            data: {
              statusBarHeight,
              navHeight,
              headerHeight,
            },
          });
          console.log(statusBarHeight, navHeight, headerHeight); // 20 40 60 iphone6/7/8
          th.tops = statusBarHeight;
        },
      });

      const query = wx.createSelectorQuery();
      query
        .select(".contexts")
        .boundingClientRect(function (res) {
          console.log(res);
          console.log(res.width);
          this.widthgoods = res.width;
        })
        .exec();
    },
    getScrollHeight() {
      this.$uGetRect(".search_top").then(({ height }) => {
        this.scrollHeight = `calc(100vh - ${height}px - ${this.tops}px - 10px)`;
        console.log("滚动区域高度", this.scrollHeight);
      });
    },
  },
  mounted() {
    this.initwidth();
    let th = this;
    const query = wx.createSelectorQuery();
    query
      .select(".contexts")
      .boundingClientRect(function (res) {
        console.log(res);
        console.log(res.width);
        th.widthgoods = res.width;
      })
      .exec();
    this.getScrollHeight();
  },
  onReady() {
    this.initwidth();
  },
};
</script>
<style>
page {
  width: 100vw;
  height: 100vh;
}
</style>
<style scoped>
.contexts {
  width: 702rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  display: flex;
  flex-direction: column;
}

.search_top {
  margin-top: 0px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search_input {
  flex: 1;
  font-size: 12px;
}

.search_group {
  width: 386rpx;
  margin-left: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  background-color: #f7f7f9;
  border-radius: 25px;
}

.search_title {
  font-size: 14px;
  white-space: nowrap;
}

.interval {
  width: 1px;
  height: 10px;
  margin-left: 8px;
  margin-right: 8px;
  background-color: black;
  color: #f7f7f9;
}
</style>
